<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 800px;
            margin: 0 auto;
        }

        .item {
            border: 1px dashed red;
            font-size: 12px;
        }

        .info {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 30px;
            background-color: #efefef;
        }

        p {
            flex: 1;
        }

        p:first-child {
            padding-left: 10px;
        }

        .content {
            padding: 10px;
            color: #666;
        }

        form {
            margin-top: 20px;
        }

        textarea {
            margin-top: 20px;
            display: block;
            width: calc(100% - 20px);
            height: 200px;
            padding: 10px;
        }

        label {
            flex: 1;
            font-size: 12px;
            color: #666;
        }

        label:first-child {
            padding-left: 10px;
        }

        .form-info {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .send-container {
            float: right;
        }

        button {
            width: 100px;
            height: 30px;
            background-color: blue;
            color: white;
            border: none;
            outline: none;
            margin-top: 5px;
        }
    </style>


</head>

<body>
    <div id="app">
        <div class="msg-list">
            <div class="item" v-for="msg in msgList" :key="msg.id">
                <div class="info">
                    <p>发布人：{{msg.username}}</p>
                    <p>发布类型：{{msg.type}}</p>
                    <p>发布时间：{{msg.createtime}}</p>
                </div>
                <div class="content">
                    {{msg.content}}
                </div>
            </div>
        </div>
        <form>
            <div class="form-info">
                <label>
                    昵称：
                    <input type="text" v-model="formData.username" placeholder="请输入昵称">
                </label>
                <label>
                    隐藏昵称：
                    <input type="checkbox" v-model="formData.isHideUsername">

                </label>
                <label>
                    发布类型：
                    <select v-model="formData.type">
                        <option value="原创">原创</option>
                        <option value="分享">分享</option>
                        <option value="求助">求助</option>
                    </select>
                </label>
            </div>
            <textarea v-model="formData.content" placeholder="请输入内容"></textarea>
            <div class="send-container">
                <button @click.prevent="addMsg">发送</button>
            </div>
        </form>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive, toRefs } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const state = reactive({
                    msgList: [
                        { id: '001', username: '小莱', type: '原创', createtime: '10:10:10', content: '你好，我是小莱，很高兴遇见你！' }
                    ],
                    formData: {
                        username: '',
                        isHideUsername: false,
                        type: '原创',
                        content: ''
                    }
                })

                const addMsg = () => {
                    // 校验表单
                    if (state.formData.content.trim() === '' || state.formData.username.trim() === '') {
                        alert('昵称和内容不能为空！')
                        return
                    }

                    // 新增一条留言
                    state.msgList.push({
                        id: new Date().getTime().toString(),
                        username: state.formData.isHideUsername ? '匿名用户' : state.formData.username,
                        type: state.formData.type,
                        content: state.formData.content,
                        createtime: new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
                    })
                    // 清空表单
                    state.formData.username = ''
                    state.formData.isHideUsername = false
                    state.formData.type = '原创'
                    state.formData.content = ''

                }
                return {
                    ...toRefs(state),
                    addMsg
                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>